<template>
  <div>
    <Header/>

    <div id="main">
      <article style="padding-top: 20px;">
        <div class="lbox">
          <div class="whitebg bloglist">
            <h2 class="htitle">
              <span class="con_nav">
                您现在的位置是：<router-link to="/">网站首页</router-link>&gt;<span>新闻资讯</span>
              </span>新闻资讯
            </h2>

            <div class="searchbox">
              <div class="search open">
                <div id="searchform">
                  <input class="input_text" placeholder="请输入关键字词" v-model="queryParams.title"
                         style="color: rgb(153, 153, 153);" type="text">
                  <input name="Submit" class="input_submit" value="搜索" type="submit" @click="handleQuery">
                </div>
              </div>
            </div>

            <ul>
              <li v-for="item in list" :key="item.id">
                <h3 class="blogtitle">
                  <router-link :to="{ name: 'information-details', params: { id: item.id} }">
                    {{item.title}}
                  </router-link>
                </h3>
                <span class="blogpic imgscale">
                  <router-link :to="{ name: 'information-details', params: { id: item.id} }">
                    <img :src="item.img" style="width: 100%; height: 140px;" alt="">
                  </router-link>
                </span>
                <p class="blogtext">{{item.summary}}</p>
                <p class="bloginfo">
                  <i class="avatar"><img :src="item.user.avatar"></i>
                  <span>{{item.user.name}}</span><span>{{item.creatTime}}</span><span></span>
                </p>
                <router-link :to="{ name: 'information-details', params: { id: item.id} }" class="viewmore">
                  查看详情
                </router-link>
              </li>
            </ul>
          </div>

          <div>
            <el-pagination
              background
              class="pagination-container"
              @current-change="handleCurrentChange"
              :current-page="queryParams.page"
              :page-size="queryParams.limit"
              :page-sizes="[10, 20, 30, 50]"
              layout="prev, pager, next"
              :total="total">
            </el-pagination>
          </div>
        </div>

        <Right/>
      </article>
    </div>

    <Footer/>
  </div>
</template>

<script>
  import { dataInformation } from '@/api/information'
  import Header from '../common/Header.vue'
  import Footer from '../common/Footer.vue'
  import Right from '../common/Right.vue'

  export default {
    components: {
      Header,
      Footer,
      Right,
    },
    data() {
      return {
        total: 0,
        list: [],
        // 查询参数
        queryParams: {
          page: 1,
          limit: 10,
          title: null
        }
      }
    },
    created() {
      this.dataInformation()
    },
    methods: {
      // 查询表格数据
      dataInformation() {
        this.loading = true
        dataInformation(this.queryParams).then(response => {
          this.list = response.data
          this.total = response.count
          this.loading = false
        })
      },
      // 分页数据跳转监听
      handleCurrentChange(val) {
        this.loading = true
        this.queryParams.page = val
        this.dataInformation()
      },
      // 搜索按钮操作
      handleQuery() {
        this.queryParams.page = 1
        this.dataInformation()
      },
      // 重置按钮操作
      resetForm(formName) {
        this.$nextTick(() => {
          this.$refs[formName].resetFields()
        })
        this.handleQuery()
      }
    }
  }
</script>
